<template>
  <div>
    <a-card :bordered="true" style="margin-bottom: 10px">
      <a-descriptions title="车辆信息">
        <a-descriptions-item label="车辆编号">
          {{ record.bikeNumber }}
        </a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="record.bikeState | selectColorFilter">{{ record.bikeState | selectTextFilter }}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="所属站点" v-if="record.stationId !== null">
          {{ record.stationName }}
        </a-descriptions-item>
        <a-descriptions-item label="当前所在站点" v-if="record.stationId === null">
          暂无站点
        </a-descriptions-item>
        <a-descriptions-item label="最近更新日期">
          {{ record.gmtModify }}
        </a-descriptions-item>
      </a-descriptions>
      <a-button type="primary" @click="handleBack">
        <a-icon type="left"/>
        返回
      </a-button>
    </a-card>
    <a-card :bordered="false">
      <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '10px', paddingLeft: '16px'}">
        <a-tab-pane loading="true" tab="使用记录" key="1">

          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="8" :sm="24">
                  <a-form-item label="起点或终点">
                    <a-select
                        v-model="queryParam.stationId"
                        placeholder="请选择">
                      <a-select-option
                          v-for="station in stations"
                          :key="station.stationId">
                        {{ station.stationName }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="停车时间">
                    <a-range-picker @change="onChange"/>
                  </a-form-item>
                </a-col>
                <a-col :md="!advanced && 8 || 24" :sm="24">
                  <span class="table-page-search-submitButtons"
                        :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                    <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                    <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <s-table
              ref="table"
              size="default"
              rowKey="key"
              :columns="columns"
              :data="loadData"
              showPagination="auto"
          >
            <span slot="money" slot-scope="text, record">{{ text }} 元</span>
            <span slot="during" slot-scope="text, record">{{ text }} 分钟</span>
          </s-table>
        </a-tab-pane>
        <a-tab-pane loading="true" tab="维修记录" key="2">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="8" :sm="24">
                  <a-form-item label="类型">
                    <a-select
                        v-model="queryParam2.bikeRecordType"
                        placeholder="请选择">
                      <a-select-option
                          v-for="(type,i) in types"
                          :key="i">
                        {{ type }}
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :md="!advanced && 8 || 24" :sm="24">
                  <span class="table-page-search-submitButtons"
                        :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                    <a-button type="primary" @click="$refs.table2.refresh(true)">查询</a-button>
                    <a-button style="margin-left: 8px" @click="() => queryParam2 = {}">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <s-table
              ref="table2"
              size="default"
              rowKey="key"
              :columns="columns2"
              :data="loadData2"
              showPagination="auto"
          >
            <span slot="bikeRecordType" slot-scope="text">
              <a-tag :color="text | stateColorFilter">{{ text | stateTextFilter }}</a-tag>
            </span>
          </s-table>
        </a-tab-pane>
      </a-tabs>

    </a-card>
  </div>
</template>

<script>
import {STable} from '@/components'
import {queryBike} from '@/api/basic/bike'
import AddBike from "./modules/bike/AddBike"
import EditBike from "./modules/bike/EditBike"
import RemoveBike from "./modules/bike/RemoveBike"
import UpdateStateBike from "./modules/bike/UpdateStateBike";
import moment from "moment";
import {listBikeRecord} from "@/api/bike/bikeRecord";
import {queryCardRecord, queryCardRecord4Bike} from "@/api/bike/cardRecord";
import {listStation} from "@/api/system/station";

let that
let stateMap = {
  0: {
    text: '送修',
    color: 'blue'
  },
  1: {
    text: '修复',
    color: 'yellow'
  },
  2: {
    text: '报废',
    color: 'red'
  },
}

export default {
  name: 'BikeRecord',
  components: {
    STable,
    AddBike,
    EditBike,
    RemoveBike,
    UpdateStateBike,
  },
  data: function () {
    return {
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      queryParam2: {},
      record: this.$route.query,
      stations: [],
      types: ['送修', '修复', '报废'],
      // 表头
      bikeStates: [
        {
          value: 0,
          label: '未使用',
        },
        {
          value: 1,
          label: '使用中',
        },
        {
          value: 2,
          label: '维修中',
        },
        {
          value: 3,
          label: '报废',
        },
      ],
      columns: [
        {
          title: '租借卡号',
          dataIndex: 'cardNumber',
          align: 'center'
        },
        {
          title: '骑行时间',
          dataIndex: 'during',
          sorter: true,
          align: 'center',
          scopedSlots: {customRender: 'during'},
        },
        {
          title: '金额',
          dataIndex: 'money',
          sorter: true,
          align: 'center',
          scopedSlots: {customRender: 'money'},
        },
        {
          title: '出发站',
          dataIndex: 'begStationName',
          align: 'center',
          scopedSlots: {customRender: 'begStationName'},
        },
        {
          title: '出发时间',
          dataIndex: 'begTime',
          align: 'center',
          scopedSlots: {customRender: 'begTime'},
        },
        {
          title: '终点站',
          dataIndex: 'endStationName',
          align: 'center',
          scopedSlots: {customRender: 'endStationName'},
        },
        {
          title: '到达时间',
          dataIndex: 'endTime',
          align: 'center',
          scopedSlots: {customRender: 'endTime'},
        },
      ],
      columns2: [
        {
          title: '类型',
          dataIndex: 'bikeRecordType',
          sorter: true,
          align: 'center',
          scopedSlots: {customRender: 'bikeRecordType'},
        },
        {
          title: '备注',
          dataIndex: 'note',
          align: 'center',
        },
        {
          title: '处理时间',
          dataIndex: 'gmtCreate',
          align: 'center',
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        // 统一处理查询参数，便于后端表格DTO用固定参数接收
        this.queryParam.bikeId = this.record.bikeId
        const queryJson = {'queryParam': JSON.stringify(this.queryParam)}
        return queryCardRecord4Bike(Object.assign(parameter, queryJson))
            .then(res => {
              return res.result
            })
      },
      loadData2: parameter => {
        // 统一处理查询参数，便于后端表格DTO用固定参数接收
        this.queryParam2.bikeId = this.record.bikeId
        const queryJson = {'queryParam': JSON.stringify(this.queryParam2)}
        return listBikeRecord(Object.assign(parameter, queryJson))
            .then(res => {
              return res.result
            })
      },
      selectedRowKeys: [],
      selectedRows: [],

      // custom table alert & rowSelection
      options: {
        alert: {
          show: true, clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      optionAlertShow: true
    }
  },
  filters: {
    stateTextFilter (state) {
      if (stateMap[state] === undefined) {
        return ''
      }
      return stateMap[state].text
    },
    stateColorFilter (state) {
      if (stateMap[state] === undefined) {
        return ''
      }
      return stateMap[state].color
    },
    selectTextFilter (val) {
      let name = ''
      if (val === 0) {
        name = '未使用'
      } else if (val === 1) {
        name = '使用中'
      } else if (val === 2) {
        name = '维修中'
      } else {
        name = '报废'
      }
      return name
    },
    selectColorFilter (val) {
      let name = ''
      if (val === 0) {
        name = 'blue'
      } else if (val === 1) {
        name = 'yellow'
      } else if (val === 2) {
        name = 'grey'
      } else {
        name = 'red'
      }
      return name
    },
  },
  beforeCreate () {
    that = this
  },
  created () {
    this.listStation()
    this.tableOption()
  },
  methods: {
    tableOption () {
      if (!this.optionAlertShow) {
        this.options = {
          alert: {
            show: true, clear: () => {
              this.selectedRowKeys = []
            }
          },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        }
        this.optionAlertShow = true
      } else {
        this.options = {
          alert: false,
          rowSelection: null
        }
        this.optionAlertShow = false
      }
    },
    listStation () {
      this.stations = []
      listStation().then(res => {
        if (res.message !== 'error') {
          this.stations = res.result
        } else {
          this.$message.error('查询站点信息失败')
        }
      }).catch(err => {
        this.$message.error('查询站点信息失败')
      })
    },
    handleOk () {
      this.$refs.table.clearSelected()
      this.$refs.table.refresh(false)
    },
    handleBack () {
      this.$router.go(-1);
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    onChange (date, dateString) {
      this.queryParam.begDate = dateString[0]
      this.queryParam.endDate = dateString[1]
    },
  }
}
</script>
